import React, { useState, useEffect } from 'react'
import Markdown from '@/components/Markdown'
import Markdown2 from '@/components/Markdown/index2'
import Echart from '@/views/Echart'
import Container from 'components/Container'

import mdUrl from './cs.md'
import style from './index.module.scss'
export default function Document() {
  const [md, setMd] = useState('加载中')
  useEffect(
    () =>
      fetch(mdUrl)
        .then((r) => r.text())
        .then((m) => setMd(m)),
    [],
  )
  return (
    <Container title="markdown 展示">
      <div className={style.container}>
        {/* <Markdown md={md} components={{
        echart: Echart,
        comp: () => <Echart></Echart>
      }} /> */}
        <Markdown2
          md={md}
          components={{
            Echart,
            Comp: () => <Echart></Echart>,
          }}
        />
      </div>
    </Container>
  )
}
